<template>
  <div class="medical-management">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>慢性病信息管理</span>
        </div>
      </template>
      <!--增增按钮和搜索框-->
      <div class="toolbar" style="margin-bottom: 20px; display: flex; align-items: center;">
        <el-button type="primary" @click="handleAdd">
          <el-icon><Plus /></el-icon>新增慢性病</el-button>
        <el-input v-model="searchKeyword" placeholder="搜索慢病名称或慢病ID" clearable style="width: 300px;margin-left: 20px" @keyup.enter="handleSearch">
          <template #append>
            <el-button @click="handleSearch">
              <el-icon><Search /></el-icon>搜索</el-button>
          </template>
        </el-input>
      </div>
      <!-- 慢病数据表格 -->
      <el-table :data="medicalList" v-loading="loading" border stripe style="width: 100%">
        <el-table-column prop="id" label="ID" min-width="100" align="center" />
        <el-table-column prop="diseaseName" label="慢性病名称" min-width="100" align="center"/>
        <!--<el-table-column prop="password" label="密码" min-width="120"/>-->
        <el-table-column prop="diseaseCode" label="慢性病编号" min-width="120" align="center"/>
        <el-table-column label="操作" min-width="120" align="center" fixed="right">
          <template #default="scope">
            <el-button type="success" @click="handleEdit(scope.row)">
              <el-icon><Edit /></el-icon>编辑</el-button>
            <el-button type="danger" @click="handleDelete(scope.row.id)">
              <el-icon><Delete /></el-icon>删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页控件 -->
      <div class="pagination" style="display: flex; justify-content: center; margin-top: 20px;">
        <el-pagination
            background
            layout="total, prev, pager, next"
            :total="total"
            :page-size="pageSize"
            :current-page="currentPage"
            @current-change="handlePageChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
// 获取用户数据
import axios from "axios";
import {ElMessage, ElMessageBox} from "element-plus";
import { Plus, Search, Edit, Delete } from '@element-plus/icons-vue';
import {onMounted, ref} from "vue";

// 响应式数据
const medicalList = ref([]);
const loading = ref(false);
const total = ref(0);
const pageSize = ref(10);
const currentPage = ref(1);
const searchKeyword = ref('');
const addDialogVisible = ref(false);
const editDialogVisible = ref(false);
const editform = ref({
  userid: '',
  password: '',
  fullname: '',
  role: ''
});

// 生命周期钩子
onMounted(() => {
  fetchMedicalnData();
});

const fetchMedicalnData = async () => {
  try {
    loading.value = true;
    const response = await axios.get('http://localhost:8088/medical/list', {
      params: {
        page: currentPage.value,
        size: pageSize.value,
        keyword: searchKeyword.value // 添加搜索关键字
      }
    });

    if (response.data.code === 200) {
      console.log(response.data)
      medicalList.value = response.data.data.records;
      total.value = response.data.data.total;
      console.log('拿到的数据:', medicalList.value);
    } else {
      ElMessage.error('数据加载失败: ' + response.data.message);
    }
  } catch (error) {
    ElMessage.error('请求失败: ' + error.message);
  } finally {
    loading.value = false;
  }
};

// 点击搜索
const handleSearch = () => {
  currentPage.value = 1; // 搜索从第一页开始
  fetchMedicalnData();
};

// 新增用户按钮事件
const handleAdd = () => {
  addDialogVisible.value=true
};

// 分页变化处理
const handlePageChange = (page) => {
  currentPage.value = page;
  fetchMedicalnData();
};

// 编辑用户
const handleEdit = (row) => {
  editform.value = {
    id: row.id,
    userid: row.userid,
    password: row.password,
    fullname: row.fullname,
    role: row.role
  };
  editDialogVisible.value = true;
};

// 删除用户
const handleDelete = async (id) => {
  try {
    await ElMessageBox.confirm('确认删除该用户吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    });

    const response = await axios.delete(`http://localhost:8088/users/delete/${id}`);
    if (response.data.code === 200) {
      ElMessage.success('删除成功');
      await fetchMedicalnData();
    }
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除失败: ' + error.message);
    }
  }
};
</script>

<style scoped>
/* 样式部分保持不变 */
.medical-management {
  padding: 20px;
}

.box-card {
  margin: 10px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
